<template>
  <div class="discovery-page">
    <div class="page-header discovery-header">
      <div class="header-content">
        <h1 class="page-title">发现</h1>
        <button class="search-btn">
          <Search :size="20" />
        </button>
      </div>
    </div>

    <div 
      class="page-content discovery-content"
      :style="{ opacity: contentOpacity, transform: `translateY(${contentTransform}px)` }"
    >
      <div class="content-layout">
        <div class="main-feed">
          <div v-if="filteredPosts.length === 0" class="empty-state">
            <Search :size="64" class="empty-icon" />
            <h3>暂无内容</h3>
            <p>试试切换其他分类或发布第一条动态吧！</p>
          </div>
          
          <div v-else class="posts-list">
            <div 
              v-for="post in filteredPosts"
              :key="post.id"
              class="post-card"
            >
              <div class="post-header">
                <div class="author-info">
                  <span class="author-avatar">{{ post.author.avatar }}</span>
                  <div class="author-details">
                    <h4 class="author-name">{{ post.author.name }}</h4>
                    <div class="post-meta">
                      <span class="post-time">{{ post.time }}</span>
                      <span class="post-distance">
                        <MapPin :size="12" />
                        {{ post.distance }}
                      </span>
                    </div>
                  </div>
                </div>
                <button class="more-btn">
                  <MoreHorizontal :size="20" />
                </button>
              </div>
              
              <div class="post-content">
                <p>{{ post.content }}</p>
                
                <div v-if="post.images && post.images.length > 0" class="post-images">
                  <div 
                    v-for="(image, index) in post.images"
                    :key="index"
                    class="image-placeholder"
                  >
                    {{ image }}
                  </div>
                </div>
                
                <div v-if="post.tags && post.tags.length > 0" class="post-tags">
                  <span 
                    v-for="tag in post.tags"
                    :key="tag"
                    :class="['tag', getTagClass(post.type)]"
                  >
                    #{{ tag }}
                  </span>
                </div>
              </div>
              
              <div class="post-actions">
                <button 
                  :class="['action-btn', { liked: post.isLiked }]"
                  @click="toggleLike(post)"
                >
                  <Heart :size="18" :fill="post.isLiked ? 'currentColor' : 'none'" />
                  <span>{{ post.likes }}</span>
                </button>
                
                <button class="action-btn">
                  <MessageCircle :size="18" />
                  <span>{{ post.comments }}</span>
                </button>
                
                <button class="action-btn">
                  <Share2 :size="18" />
                  <span>{{ post.shares }}</span>
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <div class="sidebar">
          <div class="trending-topics">
            <h3>🔥 热门话题</h3>
            <div class="topics-list">
              <div 
                v-for="topic in trendingTopics"
                :key="topic.id"
                class="topic-item"
              >
                <span class="topic-name">#{{ topic.name }}</span>
                <span class="topic-count">{{ topic.count }}条动态</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <button 
      class="fab"
      :style="{ opacity: fabOpacity, transform: `scale(${fabScale})` }"
      @click="createPost"
    >
      <Plus :size="24" />
    </button>
  </div>
</template>

<script>
import { 
  Search, 
  MapPin, 
  ChevronDown,
  MoreHorizontal, 
  Heart, 
  MessageCircle, 
  Share2, 
  Plus 
} from 'lucide-vue-next'

export default {
  name: 'Discovery',
  components: {
    Search,
    MapPin,
    ChevronDown,
    MoreHorizontal,
    Heart,
    MessageCircle,
    Share2,
    Plus
  },
  data() {
    return {
      searchQuery: '',
      activeFilter: 'all',
      posts: [],
      trendingTopics: [],

      contentOpacity: 0,
      contentTransform: 20,
      fabOpacity: 0,
      fabScale: 0.8,
      filters: [
        { key: 'all', label: '全部' },
        { key: 'skill', label: '技能分享' },
        { key: 'device', label: '设备共享' },
        { key: 'help', label: '互助求助' },
        { key: 'activity', label: '活动邀请' }
      ]
    }
  },
  computed: {
    filteredPosts() {
      if (this.activeFilter === 'all') {
        return this.posts
      }
      return this.posts.filter(post => post.type === this.activeFilter)
    }
  },
  mounted() {
    this.initializeAnimations()
    this.loadMockData()
  },
  methods: {
    initializeAnimations() {
      setTimeout(() => {
        this.contentOpacity = 1
        this.contentTransform = 0
      }, 300)
      
      setTimeout(() => {
        this.fabOpacity = 1
        this.fabScale = 1
      }, 500)
    },
    
    loadMockData() {
      const mockPosts = [
        {
          id: 1,
          type: 'skill',
          author: {
            name: '小明',
            avatar: '👨‍💻'
          },
          time: '2小时前',
          distance: '0.2km',
          content: '刚学会了一个新的Python技巧，可以大大提高数据处理效率！有需要的朋友可以来交流学习 🐍',
          images: ['📊', '💻'],
          tags: ['Python', '数据分析', '编程技巧'],
          likes: 15,
          comments: 8,
          shares: 3,
          isLiked: false
        },
        {
          id: 2,
          type: 'device',
          author: {
            name: '小红',
            avatar: '👩‍🎨'
          },
          time: '4小时前',
          distance: '0.3km',
          content: '我的专业相机这周末空闲，有需要拍照的朋友可以借用。包含各种镜头和三脚架 📸',
          images: ['📷', '🎯'],
          tags: ['相机出借', '摄影设备', '周末可用'],
          likes: 23,
          comments: 12,
          shares: 7,
          isLiked: true
        },
        {
          id: 3,
          type: 'help',
          author: {
            name: '老王',
            avatar: '👨‍🔧'
          },
          time: '6小时前',
          distance: '0.5km',
          content: '家里的水龙头坏了，有会修理的邻居吗？可以提供工具和材料费 🔧',
          images: [],
          tags: ['水龙头维修', '求助', '有偿服务'],
          likes: 8,
          comments: 15,
          shares: 2,
          isLiked: false
        },
        {
          id: 4,
          type: 'activity',
          author: {
            name: '小李',
            avatar: '👨‍🏫'
          },
          time: '8小时前',
          distance: '0.4km',
          content: '这周六下午2点在社区活动室举办编程学习小组，欢迎所有对编程感兴趣的朋友参加！',
          images: ['💻', '📚'],
          tags: ['编程学习', '周六活动', '社区聚会'],
          likes: 31,
          comments: 20,
          shares: 12,
          isLiked: true
        },
        {
          id: 5,
          type: 'skill',
          author: {
            name: '小张',
            avatar: '👩‍🍳'
          },
          time: '1天前',
          distance: '0.6km',
          content: '今天做了超好吃的提拉米苏！愿意分享制作方法，也可以教大家现场制作 🍰',
          images: ['🍰', '☕'],
          tags: ['烘焙技巧', '提拉米苏', '美食分享'],
          likes: 42,
          comments: 25,
          shares: 18,
          isLiked: false
        },
        {
          id: 6,
          type: 'device',
          author: {
            name: '小刘',
            avatar: '👨‍🎵'
          },
          time: '1天前',
          distance: '0.7km',
          content: '电钢琴可以借用，适合初学者练习。包含琴谱架和耳机 🎹',
          images: ['🎹', '🎵'],
          tags: ['钢琴出借', '音乐练习', '初学者友好'],
          likes: 19,
          comments: 9,
          shares: 5,
          isLiked: true
        }
      ]
      
      const mockTopics = [
        { id: 1, name: '编程学习', count: 156 },
        { id: 2, name: '设备共享', count: 89 },
        { id: 3, name: '美食制作', count: 67 },
        { id: 4, name: '摄影技巧', count: 45 },
        { id: 5, name: '家居维修', count: 34 },
        { id: 6, name: '音乐交流', count: 28 }
      ]
      
      this.posts = mockPosts
      this.trendingTopics = mockTopics
    },
    
    setActiveFilter(filterKey) {
      this.activeFilter = filterKey
    },
    
    getTagClass(type) {
      const tagClasses = {
        skill: 'skill-tag',
        device: 'device-tag',
        help: 'help-tag',
        activity: 'activity-tag'
      }
      return tagClasses[type] || 'default-tag'
    },
    
    toggleLike(post) {
      post.isLiked = !post.isLiked
      post.likes += post.isLiked ? 1 : -1
    },
    
    createPost() {
      console.log('创建新动态')
      // 这里可以打开创建动态的界面
    }
  }
}
</script>

<style scoped>
.discovery-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f4e8ed;
  font-family: 'Courier New', monospace;
  overflow: hidden;
}

.discovery-header {
  height: 80px;
  box-sizing: border-box;
}

.header-content {
  justify-content: center;
  max-width: 1200px;
  height: 100%;
}

.search-btn {
  position: absolute;
  right: 0;
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-btn:hover {
  background: #f5f5f5;
  color: #007aff;
}



.discovery-content {
  padding: 10px 20px 100px 20px;
}

.content-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.main-feed {
  min-height: 400px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  text-align: center;
  color: #8B0000;
  font-family: 'Courier New', monospace;
}

.empty-icon {
  opacity: 0.7;
  margin-bottom: 20px;
  filter: drop-shadow(2px 2px 0px #000000);
}

.empty-state h3 {
  margin: 0 0 10px 0;
  font-size: 24px;
  text-transform: uppercase;
  text-shadow: 1px 1px 0px #FFFFFF;
}

.empty-state p {
  margin: 0;
  opacity: 0.8;
  font-size: 16px;
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post-card {
  background: white;
  border: 2px solid #e1e8ed;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: inherit;
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-color: #42a5f5;
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  font-size: 40px;
}

.author-name {
  margin: 0 0 5px 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #6c757d;
  font-family: inherit;
}

.post-distance {
  display: flex;
  align-items: center;
  gap: 4px;
}

.more-btn {
  background: #f8f9fa;
  border: 1px solid #e1e8ed;
  color: #6c757d;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
  font-family: inherit;
}

.more-btn:hover {
  background: #e9ecef;
  color: #42a5f5;
}

.more-btn:active {
  transform: scale(0.95);
}

.post-content {
  margin-bottom: 15px;
}

.post-content p {
  color: #2c3e50;
  line-height: 1.6;
  margin: 0 0 15px 0;
  font-size: 15px;
  font-family: inherit;
}

.post-images {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.image-placeholder {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #42a5f5, #90caf9);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  border: none;
  box-shadow: 0 2px 8px rgba(66, 165, 245, 0.3);
  color: white;
  font-family: inherit;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: white;
  font-family: inherit;
  border: none;
}

.tag.skill-tag {
  background: linear-gradient(135deg, #42a5f5, #90caf9);
}

.tag.device-tag {
  background: linear-gradient(135deg, #26a69a, #80cbc4);
}

.tag.help-tag {
  background: linear-gradient(135deg, #ff7043, #ffab91);
}

.tag.activity-tag {
  background: linear-gradient(135deg, #ab47bc, #ce93d8);
}

.tag.default-tag {
  background: linear-gradient(135deg, #78909c, #b0bec5);
}

.post-actions {
  display: flex;
  gap: 20px;
  padding-top: 15px;
  border-top: 1px solid #e1e8ed;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8f9fa;
  border: 1px solid #e1e8ed;
  color: #6c757d;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 20px;
  transition: all 0.2s ease;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
}

.action-btn:hover {
  background: #e9ecef;
  color: #42a5f5;
  border-color: #42a5f5;
}

.action-btn:active {
  transform: scale(0.95);
}

.action-btn.liked {
  background: linear-gradient(135deg, #ff7043, #ffab91);
  border-color: #ff7043;
  color: white;
}

.action-btn.liked:hover {
  background: linear-gradient(135deg, #ff5722, #ff8a65);
  border-color: #ff5722;
}

.action-btn.liked:active {
  transform: scale(0.95);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.trending-topics {
  background: white;
  border: 2px solid #e1e8ed;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: inherit;
}

.trending-topics h3 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
  font-family: inherit;
}

.topics-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.topic-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #e1e8ed;
}

.topic-item:hover {
  background: #e9ecef;
  border-color: #42a5f5;
}

.topic-name {
  color: #2c3e50;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
}

.topic-count {
  color: white;
  font-size: 12px;
  background: linear-gradient(135deg, #42a5f5, #90caf9);
  padding: 4px 8px;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 500;
}

.fab {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #42a5f5, #90caf9);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(66, 165, 245, 0.4);
  transition: all 0.3s ease;
  z-index: 1000;
  font-family: inherit;
}

.fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(66, 165, 245, 0.6);
}

.fab:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(66, 165, 245, 0.4);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .content-layout {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    order: -1;
  }
}

@media (max-width: 768px) {
  .discovery-header {
    padding: 12px 15px;
  }
  
  .header-content {
    justify-content: center;
  }
  
  .discovery-content {
    padding: 10px 15px;
  }
  
  .post-card {
    padding: 15px;
  }
  
  .author-avatar {
    font-size: 36px;
  }
  
  .post-images {
    gap: 8px;
  }
  
  .image-placeholder {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }
  
  .fab {
    bottom: 70px;
    right: 15px;
    width: 50px;
    height: 50px;
  }
}

</style>